<template>
  <div class="container">
    <AppSearchFormMini @submit="getList" @reset="reset" labelWidth="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="编号查询">
            <div style="width: 100%">
              <el-row :gutter="4">
                <el-col :span="10">
                  <el-select
                    v-model="state.query.numberType"
                    placeholder="编号类型"
                    style="width: 100%"
                  >
                    <el-option label="发货单号" value="1"></el-option>
                    <el-option label="合同单号" value="2"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="14">
                  <el-input
                    style="width: 100%"
                    placeholder="请输入"
                    v-model="state.query.keyWords"
                  ></el-input>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运抵国">
            <el-select
              placeholder="请选择"
              v-model="state.query.country"
              clearable
              filterable
              remote
              :remote-method="getCountryData"
              :loading="state.selectLoading"
            >
              <el-option
                v-for="item in state.countryList"
                :key="item.id"
                :label="item.countryCh"
                :value="item.countryCode"
              >
                <span>{{ item.countryCh + "-" + item.countryEn }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户(甲方)">
            <el-select
              v-model="state.query.CustomId"
              clearable
              filterable
              remote
              :remote-method="getCustomData"
              :loading="state.selectLoading"
            >
              <el-option
                v-for="item in state.CustomList"
                :key="item.id"
                :label="item.comNameCn"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运输方式">
            <el-select
              v-model="state.query.TransportMode"
              placeholder="请选择"
              clearable
              filterable
              remote
              :remote-method="getTransportModeData"
              :loading="state.selectLoading"
            >
              <el-option
                v-for="item in state.TransportList"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <template #hidden>
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户(乙方)">
              <el-select
                v-model="state.query.CompanyId"
                placeholder="请选择"
                clearable
                filterable
                remote
                :remote-method="getCustomData"
                :loading="state.selectLoading"
              >
                <el-option
                  v-for="item in state.CustomList"
                  :key="item.id"
                  :label="item.comNameCn"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="贸易条款">
              <el-select
                v-model="state.query.TradeTerms"
                placeholder="请选择"
                clearable
                filterable
                remote
                :remote-method="getTradeTermsData"
                :loading="state.selectLoading"
              >
                <el-option
                  v-for="item in state.TradeTermsList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="托运类型">
              <el-select v-model="state.query.ConsignmentType">
                <el-option label="整箱" :value="1"></el-option>
                <el-option label="拼箱" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务员">
              <el-select
                v-model="state.query.UserId"
                placeholder="请选择"
                clearable
                filterable
                remote
                :remote-method="getUserData"
                :loading="state.selectLoading"
              >
                <el-option
                  v-for="item in state.UserList"
                  :key="item.id"
                  :label="item.realName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="预计出货">
              <el-date-picker
                v-model="state.query.orderTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </AppSearchFormMini>

    <div class="hint">
      <div class="item1">
        同步更新温馨提示
        <div>
          <el-icon
            v-if="state.tipshow"
            @click="state.tipshow = false"
            style="cursor: pointer"
            size="16"
            color="#000000"
          >
            <Close />
          </el-icon>
          <span
            style="color: #248bff; cursor: pointer"
            @click="state.tipshow = true"
            v-else
            >展开</span
          >
        </div>
      </div>
      <el-collapse-transition>
        <div v-if="state.tipshow">
          <div class="item2">
            目前还有{{
              5
            }}份合同还未从孚盟系统导入，请及时更新数据，避免影响后续操作<span
              @click="updateNow"
              >同步更新</span
            >
          </div>
        </div>
      </el-collapse-transition>
    </div>

    <div class="MainBox">
      <AppVxeTable
        :rowId="'Id'"
        ref="ContractTableRef"
        :tableHeaderKey="'ContractRefTable'"
        :toolbarConfig="true"
        class="vex-table-primary"
        :tableVisible="
          state.tableData.data.length || state.tableLoading == true
        "
        :tableData="state.tableData.data"
        :tableOption="state.tableData.option"
        :hasCheckBox="true"
        @getTableList="getList"
        v-loading="state.tableLoading"
      >
        <template #leftBtnGroup>
          <div class="workbench-second-title">
            <el-button type="primary" @click="updateNow">同步更新</el-button>
            <el-button type="primary" @click="DcClick">物流订舱</el-button>
            <el-button type="primary" @click="BoxClick">装箱指示</el-button>
            <el-button type="primary" @click="TimeClick"
              >发货时间确认</el-button
            >
            <el-button type="primary" @click="ActualDataClick"
              >实出数据确认</el-button
            >
          </div>
        </template>
        <template #rightBtnGroup>
          <el-button
            :icon="RefreshRight"
            class="left10 btn-mini-size"
            @click="initList()"
            >刷新</el-button
          >
        </template>

        <vxe-column
          fixed="left"
          title="复选"
          type="checkbox"
          width="40"
        ></vxe-column>

        <vxe-column
          field="FhNo"
          title="发货单号"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span class="link" @click="goDetail(row.Status)">{{
              row.FhNo
            }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="ContractNo"
          title="合同单号"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span class="link" @click="goDetail2(row.Status)">{{
              row.ContractNo
            }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="CompanyName"
          title="公司"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.CompanyName }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="CompanyAddress"
          title="公司地址"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.CompanyAddress }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="CustomName"
          title="客户"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.CustomName }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="CustomAddress"
          title="客户地址"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.CustomAddress }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="ExamineStatus"
          title="审核状态"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <div
              class="statusBox"
              :class="
                row.ExamineStatus == 0
                  ? 'cgstatus'
                  : row.ExamineStatus == 1
                  ? 'shstatus'
                  : 'wcstatus'
              "
            >
              <span class="circle"></span>
              <span class="statustext">{{
                getStatusText(row.ExamineStatus)
              }}</span>
            </div>
          </template>
        </vxe-column>

        <vxe-column
          field="TradeTerms"
          title="贸易条款"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.TradeTerms }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="TransportMode"
          title="运输方式"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.TransportMode }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="ArrivalCountry"
          title="运抵国"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.ArrivalCountry }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="DestPort"
          title="目的港"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.DestPort }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="SalesMan"
          title="业务员"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.SalesMan }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="Currency"
          title="币种"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.Currency }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="EstimatedShippingTime"
          title="预计出货时间"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.EstimatedShippingTime }}</span>
          </template>
        </vxe-column>

        <vxe-column
          field="ConsignmentType"
          title="托运类型"
          sortable
          :resizable="true"
          show-overflow
          width="140"
        >
          <template #default="{ row }">
            <span>{{ row.ConsignmentType }}</span>
          </template>
        </vxe-column>
      </AppVxeTable>
    </div>

    <!-- 装箱指示 -->
    <BoxDialog ref="BoxDialogRef"></BoxDialog>
    <!-- 多票物流订舱提示 -->
    <el-dialog
      v-model="state.MoreDcDialog.Dcshow"
      title="多票合并物流订舱提醒"
      width="434px"
    >
      <div class="MoreDialogContent">
        <div class="MoreDialogText">
          确定将这两行发货通知单合并成一条通知单去订舱吗？
        </div>
        <div class="MoreDialogText">
          虽合并成一条去进行订舱委托书，但仍不妨碍该两条发货通知单进行报关
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="state.MoreDcDialog.Dcshow = false">取消</el-button>
          <el-button type="primary" @click="MoreDcSubmit"> 去订舱 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 物流订舱装箱提示 -->
    <el-dialog
      v-model="state.MoreDcDialog.DcBoxshow"
      title="温馨提醒"
      width="314px"
    >
      <div class="MoreDialogContent">
        <div class="MoreDialogText">
          您还未进行装柜试算，您确定要先进订舱操作吗？
        </div>
        <div class="MoreDialogText">先订舱，也不影响您后续操作</div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="state.MoreDcDialog.DcBoxshow = false"
            >取消</el-button
          >
          <el-button @click="MoreDcBoxClick">去装柜试算</el-button>
          <el-button type="primary" @click="MoreDcBoxSubmit">
            继续去订舱
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 确认发货时间 -->
    <TimeDialog ref="TimeDialogRef"></TimeDialog>
    <!-- 实出数据确认 -->
    <ActualDataDialog ref="ActualDataDialogRef"></ActualDataDialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import AppSearchFormMini from "@/components/AppSearchFormMini.vue";
import { useTableOption } from "@/components/AppPageTable2";
import AppVxeTable from "@/components/AppVxeTable.vue";
import { RefreshRight, Close } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { validateNumber } from "@/utils/validate.js";
import BoxDialog from "./components/BoxDialog.vue";
import TimeDialog from "./components/TimeDialog.vue";
import ActualDataDialog from "./components/ActualDataDialog.vue";
import { useRouter } from "vue-router";
import request from "@/public/request";

const Router = useRouter();

const state = reactive({
  clientHeight: document.body.clientHeight - 250,
  query: {
    numberType: "1",
    KeyWords: "",
    country: "",
    CustomId: "",
    TradeTerms: "",
    TransportMode: "",
    CompanyId: "",
    ConsignmentType: "",
    UserId: "",
    orderTime: [],
  },
  tableData: {
    data: [
      {
        Id: 1,
        FhNo: "SA24050019",
        ContractNo: "JH2401878",
        CompanyName: "君禾泵业股份有限公司",
        CompanyAddress: "SD240410+11",
        CustomName: "Glong italy srl",
        CustomAddress: "Glong italy srl",
        ExamineStatus: 0,
        TradeTerms: "外销促销订单",
        TransportMode: "水路运输",
        ArrivalCountry: "POLAND",
        DestPort: "NingBo",
        SalesMan: "admin",
        Currency: "RMB",
        EstimatedShippingTime: "2024-05-22 10:25:36",
        ConsignmentType: "整箱",
        Status: 1,
      },
      {
        Id: 2,
        FhNo: "SA24050019",
        ContractNo: "JH2401878",
        CompanyName: "君禾泵业股份有限公司",
        CompanyAddress: "SD240410+11",
        CustomName: "Glong italy srl",
        CustomAddress: "Glong italy srl",
        ExamineStatus: 1,
        TradeTerms: "外销促销订单",
        TransportMode: "水路运输",
        ArrivalCountry: "POLAND",
        DestPort: "NingBo",
        SalesMan: "admin",
        Currency: "RMB",
        EstimatedShippingTime: "2024-05-22 10:25:36",
        ConsignmentType: "整箱",
        Status: 2,
      },
      {
        Id: 3,
        FhNo: "SA24050019",
        ContractNo: "JH2401878",
        CompanyName: "君禾泵业股份有限公司",
        CompanyAddress: "SD240410+11",
        CustomName: "Glong italy srl",
        CustomAddress: "Glong italy srl",
        ExamineStatus: 2,
        TradeTerms: "外销促销订单",
        TransportMode: "水路运输",
        ArrivalCountry: "POLAND",
        DestPort: "NingBo",
        SalesMan: "admin",
        Currency: "RMB",
        EstimatedShippingTime: "2024-05-22 10:25:36",
        ConsignmentType: "整箱",
        Status: 3,
      },
    ],
    option: useTableOption(),
  },
  tableLoading: false,
  tipshow: true,

  MoreDcDialog: {
    Dcshow: false,
    DcBoxshow: false,
  },
  countryList: [],
  CustomList: [],
  CompantList: [],
  UserList: [],
  TransportList: [],
  TradeTermsList: [],
  selectLoading: false,
});

// 获取国家信息
const getCountryData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/cscountry/querypage", {
    PageIndex: 1,
    PageSize: 15,
    KeyWords: val,
  });
  state.countryList = res.content;
  state.selectLoading = false;
};
// 获取客户信息
const getCustomData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/crcontactcompany/querypagedto", {
    PageIndex: 1,
    PageSize: 15,
    ComNameCn: val,
  });
  state.CustomList = res.content;
  state.selectLoading = false;
};

// 获取公司信息
const getCompanyData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/basedictdetail/querypage", {
    PageIndex: 1,
    PageSize: 15,
    DictName: "公司",
    KeyWords: val,
  });
  state.CompantList = res.content;
  state.selectLoading = false;
};
// 获取业务员信息
const getUserData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/user/query", {
    PageIndex: 1,
    PageSize: 15,
    KeyWords: val,
  });
  state.UserList = res.content;
  state.selectLoading = false;
};
// 获取贸易条款信息
const getTradeTermsData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/basedictdetail/querypage", {
    PageIndex: 1,
    PageSize: 15,
    DictName: "贸易条款",
    KeyWords: val,
  });
  state.TradeTermsList = res.content;
  state.selectLoading = false;
};

// 获取运输方式信息
const getTransportModeData = async (val) => {
  state.selectLoading = true;
  let res = await request.get("/api/basedictdetail/querypage", {
    PageIndex: 1,
    PageSize: 15,
    DictName: "运输方式",
    KeyWords: val,
  });
  state.TransportList = res.content;
  state.selectLoading = false;
}

const BoxDialogRef = ref();
const TimeDialogRef = ref();
const ActualDataDialogRef = ref();
// 物流订舱
const DcClick = async () => {
  let arr = JSON.parse(JSON.stringify(state.tableData.option.selected));
  if (arr.length == 0) {
    ElMessage.warning("请选择数据");
    return;
  }
  if (arr.length > 1) {
    state.MoreDcDialog.Dcshow = true;
  } else {
    state.MoreDcDialog.DcBoxshow = true;
  }
};
const MoreDcSubmit = () => {
  state.MoreDcDialog.Dcshow = false;
  nextTick(() => {
    state.MoreDcDialog.DcBoxshow = true;
  });
};
const MoreDcBoxClick = () => {
  state.MoreDcDialog.DcBoxshow = false;
  nextTick(() => {
    BoxDialogRef.value.openDialog();
  });
};
const MoreDcBoxSubmit = () => {
  state.MoreDcDialog.DcBoxshow = false;
  ElMessage.success("成功");
};
// 装箱指示

const BoxClick = () => {
  let arr = JSON.parse(JSON.stringify(state.tableData.option.selected));
  if (arr.length == 0) {
    ElMessage.warning("请选择数据");
    return;
  }
  BoxDialogRef.value.openDialog();
};

// 发货时间确认
const TimeClick = () => {
  let arr = JSON.parse(JSON.stringify(state.tableData.option.selected));
  if (arr.length == 0) {
    ElMessage.warning("请选择数据");
    return;
  }
  TimeDialogRef.value.openDialog();
};

// 实出数据确认
const ActualDataClick = () => {
  let arr = JSON.parse(JSON.stringify(state.tableData.option.selected));
  if (arr.length == 0) {
    ElMessage.warning("请选择数据");
    return;
  }
  ActualDataDialogRef.value.openDialog();
};

// 确认审核
const submitStatus = (val) => {
  let arr = JSON.parse(JSON.stringify(state.tableData.option.selected));
  if (arr.length == 0) {
    ElMessage.warning("请选择数据");
    return;
  }
  ElMessage.success("成功");
};
// 同步更新
const updateNow = () => {
  ElMessage.success("数据同步更新成功");
};
// 获取发货单数据
const getList = async () => {};
const reset = () => {
  state.query = {
    ContractType: "",
    ContractNo: "",
    KhContractNo: "",
    KhId: "",
    BmId: "",
    Currency: "",
    Status: null,
    orderTime: [],
  };
};

const goDetail = (type) => {
  Router.openTab({
    path: "/ExportLogistics/ShippingNotice/selfOwnedSNDetail",
    query: {
      type: type,
      title: `自有发货通知单详情`,
    },
  });
};

const goDetail2 = (type) => {
  Router.openTab({
    path: "/exportContract/exportContractBusiness/ProprietaryContractDetail",
    query: {
      id: "JH2401878",
      title: `自有合同详情`,
    },
  });
};

const getStatusText = (i) => {
  var str = "";
  switch (i) {
    case 0:
      str = "草稿";
      break;
    case 1:
      str = "待审核";
      break;
    case 2:
      str = "审核通过";
      break;

    default:
      break;
  }
  return str;
};
</script>
<style lang="scss" scoped>
.container {
  padding: 8px;
}
.MainBox {
  background: #ffffff;
  margin-top: 8px;
  box-sizing: border-box;
  padding: 8px 12px;
}

.hint {
  padding: 4px;
  background-color: #feeff0;
  border: 1px solid #ff0000;
  margin-top: 8px;
  border-radius: 3px;

  .item1 {
    color: #ee2e3f;
    font-family: Roboto;
    font-weight: regular;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    i {
      color: #666666;
      font-size: 18px;
      cursor: pointer;
    }
  }

  .item2 {
    color: #000000d8;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    margin-bottom: 3px;

    span {
      color: #409eff;
      cursor: pointer;
      margin-left: 5px;
    }
  }

  .item3 {
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: regular;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;

    span {
      color: #409eff;
      cursor: pointer;
      margin-left: 5px;
    }
  }
}

.link {
  color: #409eff;
  cursor: pointer;
}

.statusBox {
  display: flex;
  align-items: center;
  .circle {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 3px;
  }
  .statustext {
    color: rgba(0, 0, 0, 0.85);
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
  }
}
.cgstatus {
  .circle {
    background: rgba(150, 151, 153, 1);
  }
  .statustext {
    color: rgba(150, 151, 153, 1);
  }
}
.shstatus {
  .circle {
    background: rgba(0, 0, 0, 0.6);
  }
  .statustext {
    color: rgba(0, 0, 0, 0.6);
  }
}
.wcstatus {
  .circle {
    background: rgba(36, 139, 255, 1);
  }
  .statustext {
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>
